<template>
  <div id="my_collect">
    <div id="address">
      <header class="top_bar">
        <a @click="gotoPage()" class="icon_back"></a>
        <h3 class="addressName" align="center">我的地址</h3>
      </header>
    </div>

    <mt-field label="姓名" placeholder="请输入收货人" v-model="name"></mt-field>
    <mt-field label="手机号码" placeholder="收输入联系号码" type="tel" v-model="mobile"></mt-field>
    <div class="region" @click="openChose">
      <div class="titile">地区信息</div>
      <div class="chose">{{city}}</div>
    </div>
    <mt-field label="详细地址" placeholder="请输入详细地址" v-model="address"></mt-field>
    <v-distpicker type="mobile" @selected="selected" v-show="addInp"></v-distpicker>
    <div class="region" @click="changDefault">

      <div :class="is_default?'isdefault':'notdefault'"></div>
      <div class="checkWord">默认地址</div>
    </div>

    <!-- <mt-radio v-model="is_default" :options=options align="right"> -->
    <!-- </mt-radio> -->
    <!-- <AddressAddHeaderView></AddressAddHeaderView>
		<AddressAddMainView></AddressAddMainView> -->
    <div class="bottom">
      <footer class="address_footer" @click="addNewAddress()">
        <div class="add_text">保存</div>
      </footer>
    </div>
  </div>
</template>
<script>
//  import AddressAddHeaderView from './AddressAddHeader.vue';
//  import AddressAddMainView from './AddressAddMain.vue';
import { Field, Picker, Button, MessageBox } from 'mint-ui'
import { rejects } from 'assert'
import VDistpicker from 'v-distpicker'

export default {
  components: {
    VDistpicker,
    Field,
    MessageBox,
    'mt-picker': Picker,
    Button
    // AddressAddFooterView
  },
  data() {
    return {
      id: '',
      name: '',
      is_default: true,
      addInp: false,
      mobile: '',
      province_id: '',
      city_id: '',
      area_id: '',
      address: '',
      province: '',
      city: '请选择',
      citys: '',
      area: ''
    }
  },

  mounted() {
    this.searChData(this.$route.params.id)
  },
  methods: {
    searChData(itemId) {
      this.$store.dispatch('hideNav')
      if (itemId != '') {
        if (window.sessionStorage.userInfo) {
          let _this = this
          let uObj = JSON.parse(window.sessionStorage.userInfo)
          let userId = uObj.id
          _this.$http
            .get('/mechanism/address/detail', {
              params: {
                userId: userId,
                id: itemId
              }
            })
            .then(res => {
              if (res.data.errno === 0) {
                _this.id = res.data.data.id
                _this.name = res.data.data.name
                _this.mobile = res.data.data.mobile
                _this.province = res.data.data.provinceName
                _this.citys = res.data.data.cityName
                _this.area = res.data.data.areaName
                _this.city = res.data.data.provinceName + '' + res.data.data.cityName + '' + res.data.data.areaName
                _this.province_id = res.data.data.provinceId
                _this.city_id = res.data.data.cityId
                _this.area_id = res.data.data.areaId
                _this.address = res.data.data.address
                _this.is_default = res.data.data.isDefault
              }
            })
        }
      }
    },
    gotoPage() {
      const type = 1
      this.$router.push('/address/' + type)
    },
    changDefault() {
      console.log(1)
      if (this.is_default) {
        this.is_default = false
      } else {
        this.is_default = true
      }
    },

    addNewAddress() {
      if (this.name === '') {
        MessageBox('提示', '收货人不能为空')
        return
      }
      if (this.mobile.length != 11) {
        MessageBox('提示', '手机号码不正确')
        return
      }
      if (this.area_id === '') {
        MessageBox('提示', '请选择地区')
        return
      }
      if (this.address === '') {
        MessageBox('提示', '请填写具体地址')
        return
      }
      this.address = this.cleanSpelChar(this.address)
      if (window.sessionStorage.userInfo) {
        let _this = this
        let uObj = JSON.parse(window.sessionStorage.userInfo)
        let userId = uObj.id
        _this.$http
          .get('/mechanism/address/save', {
            params: {
              id: _this.id,
              userId: userId,
              name: _this.name,
              mobile: _this.mobile,
              province_id: _this.province_id,
              city_id: _this.city_id,
              area_id: _this.area_id,
              address: _this.address,
              is_default: _this.is_default
            }
          })
          .then(res => {
            MessageBox('提示', '添加成功')
            if (res.data.errno === 0) {
              window.history.go(-1)
            }
          })
      }
    },
    cleanSpelChar: function(localData) {
      var noiseChar = '#$%^&_+-=`[]{};\':"\\|,./<>?\n\r～！＠＃＄％＆＊·‘’¥——＿＋－＝｀｛｝；＇：＂＼｜，．／“”　'
      var goodChar = ''
      for (var i = 0; i < noiseChar.length; i++) {
        var oneChar = noiseChar.charAt(i)
        var towChar = goodChar
        while (localData.indexOf(oneChar) >= 0) {
          localData = localData.replace(oneChar, towChar)
        }
      }
      return localData
    },
    toAddress() {
      this.mask = true
      this.addInp = true
    },
    openChose() {
      this.addInp = true
    },

    selected(data) {
      console.log(data)
      this.addInp = false
      this.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
      this.province_id = data.province.code
      this.city_id = data.city.code
      this.area_id = data.area.code
      console.log(this.city)
    }
  }
}
</script>
<style>
@import '../assets/css/addressAdd.css';
</style>
